<template>
    <!--左侧房源筛选-->
    <div class="lefMain">
        <!--左侧1-->
        <span class="leftTop">
            <span style="font-size: 18px;white-space: nowrap;color:#7a8df1;font-weight: 600;">{{ $t('text.Contract.l11')
            }}</span>
            <DialogLayout61>
                <span class="df">
                    <img class="addImg" src="../../assets/images/add.svg">
                    <div style="font-size: 13px;white-space: nowrap;">{{ $t('text.Contract.l12') }}</div>
                </span>
            </DialogLayout61>
        </span>

        <div class="leftTopInput">
            <img class="img1" src="../../assets/images/search2.png" />
            <input :placeholder="$t('text.Contract.l13')" class="leftTop2Input" v-model="inputSearch">
        </div>

        <!--左侧3-->
        <div>
            <div class="leftTop2">
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Contract.l26')" :selectList="dictionaryTree.contractMustStatus"
                            searchKey="mustStatus_EQ" @returnData="setData" @clearData="clearData" :isReset="isReset" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <span style="white-space: nowrap;padding-bottom: 3px;">{{ $t('text.Contract.l27') }}</span>
                            <CommonSelect :myStyles="{ width: '100%', border: 'none' }" isShowSearch :clear="isReset"
                                :childStyle="{ fontSize: '12px', padding: 0, textAlign: 'right' }"
                                :hit="$t('text.Common.l12')" @returnData="setUser" isHasHead :isinputFlag="true">
                            </CommonSelect>
                        </div>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Contract.l28')" :selectList="orgTreeList" searchKey="orgIds"
                            isShowTitle @returnData="setData" @clearData="clearData" isRange2 :isReset="isReset">
                        </RadioSelect>
                    </div>
                </div>
                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="time">
                        {{ $t('text.Contract.l29') }}
                        <el-date-picker v-model="time" type="daterange" unlink-panels range-separator="-"
                            start-placeholder="Start date" end-placeholder="End date" :size="'small'"
                            style="width: 100px;margin-left: 10px;" value-format="YYYY-MM-DD" />
                    </div>
                </div>

                <div class="df">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Contract.l30')" :selectList="dictionaryTree.contractShareStatus"
                            searchKey="shareStatus_EQ" @returnData="setData" @clearData="clearData" :isReset="isReset" isSingle>
                        </RadioSelect>
                    </div>
                </div>
                <div class="df" v-if="searchData.contractType == 0">
                    <img class="img2" src="../../assets/images/icon.png" />
                    <div class="items">
                        <RadioSelect :leftText="$t('text.Contract.l31')" :selectList="dictionaryTree.dealPlanStatus" isSingle
                            :isReset="isReset" searchKey="dealPlanStatus" @returnData="setData" @clearData="clearData">
                        </RadioSelect>
                    </div>
                </div>

            </div>
        </div>
        <div class="resetDiv" @click="reset">{{ $t('text.Contract.l32') }}</div>

    </div>

    <!--右侧房源列表-->
    <div class="rightMain">
        <!--右侧顶部导航-->
        <div class="rightTop">
            <div></div>
            <TimePageNavList :timeNavList="timeNavList.data" :defaultClick="timeNavList.defaultClick"
                @returnData="setContractType"></TimePageNavList>
            <div class="out"><img class="outImg" src="../../assets/images/out.svg"><span>{{ $t('text.Employee.l7') }}</span>
            </div>
        </div>
        <!--右侧房源数据列表-->
        <div class="rightContain">

            <table class="rightList" v-if="resultList.length > 0">
                <tr class="eDataList" v-for="item in resultList" :key="item" @click="goToDetail(item)">
                    <td class="dataDom">
                        <div class="dataTitle">{{ item.no == null ? '-' : item.no }}</div>
                        <div class="dataValue">
                            <span class="tag1" v-if="item.mustStatus == 0">{{ $t('text.Contract.l14') }}</span>
                            <span class="tag3" v-if="item.mustStatus == 1">{{ $t('text.Contract.l20') }}</span>
                            <span class="tag4" v-if="item.mustStatus == 2">{{ $t('text.Contract.l21') }}</span>

                            <span class="tag1" v-if="item.shareStatus == 0">{{ $t('text.Contract.l16') }}</span>
                            <span class="tag2" v-if="item.shareStatus == 1">{{ $t('text.Contract.l19') }}</span>
                            <span class="tag3" v-if="item.shareStatus == 2">{{ $t('text.Contract.l22') }}</span>

                            <span class="tag1" v-if="searchData.contractType == 0 && item.dealPlanStatus == 0">
                                {{ $t('text.Contract.l15') }}
                            </span>
                            <span class="tag2" v-if="searchData.contractType == 0 && item.dealPlanStatus == 1">
                                {{ $t('text.Contract.l18') }}
                            </span>
                            <span class="tag3" v-if="searchData.contractType == 0 && item.dealPlanStatus == 2">
                                {{ $t('text.Contract.l23') }}
                            </span>
                        </div>
                    </td>
                    <td class="dataDom">
                        <div class="dataTitle">
                            {{ item.communityName == null ? '-' : item.communityName }}&emsp;
                            {{ item.building }}{{ item.unit }}{{ item.roomIdentifier }}
                        </div>
                        <div class="dataValue">
                            {{ item.dealPrice == null ? '-' : String(item.dealPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
                                'AED' }}&emsp;
                            {{ item.houseArea == null ? '-' : item.houseArea + 'm²' }}
                        </div>
                    </td>


                    <td class="dataDom">
                        <div class="dataTitle" :style="item.mustStatus == 1 ? { color: '#54d2d0' } : { color: '#f68686' }">
                            {{ item.realRevenue == null ? '-' : String(item.realRevenue).replace(/\B(?=(\d{3})+(?!\d))/g,
                                ',') + ' AED' }}/
                            {{ item.mustRevenue == null ? '-' : String(item.mustRevenue).replace(/\B(?=(\d{3})+(?!\d))/g,
                                ',') + ' AED' }}
                        </div>
                        <div class="dataValue">{{ $t('text.Contract.l24') }}</div>
                    </td>
                    <td class="dataDom">
                        <div class="dataTitle">{{ item.signUserName == null ? '-' : item.signUserName }}</div>
                        <div class="dataValue">{{ item.signTime == null ? '-' : item.signTime + ' ' +
                            $t('text.Contract.l25')
                        }}</div>
                    </td>
                </tr>
            </table>
            <div class="rightList" v-else>
                <div class="nulData">
                    {{ $t('text.Common.l67') }}
                </div>
            </div>
            <!--底部分页-->
            <div class="setPage">
                <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
                    :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
    
<script>
import RadioSelect from "../../components/select/RadioSelect.vue"
import TimePageNavList from "../../components/navigation/TimePageNavList.vue"
import { contractFindPage, getContractManageDrop, userGetOrgTree } from "../../http/api"
import DialogLayout61 from "@/components/dialogLayout/DialogLayout61.vue"
import CommonSelect from "@/components/input/CommonSelect.vue"

export default {
    name: "ContractManage",
    components: {
        RadioSelect,
        TimePageNavList,
        DialogLayout61,
        CommonSelect
    },
    data() {
        return {
            searchData: {
                pageNo: 1,
                pageSize: 15,
                contractType: 0
            },
            resultList: [],
            dictionaryTree: {},
            time: "",
            inputSearch: "",
            orgTreeList: [],
            isReset: false,
            total: 0,
            jobSelect: [],
            timeNavList: {
                defaultClick: this.$t("text.HomeView.l12"),
                data: [this.$t("text.HomeView.l12"), this.$t("text.HomeView.l13"), this.$t("text.HomeView.l14")],
            },
        }
    },
    mounted() {
        this.search()
        getContractManageDrop().then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res
                this.getThree()
            }
        }).catch()
    },
    methods: {

        getThree() {
            userGetOrgTree({ perm: this.searchData.contractType == 0 ? 'find_sell_contract' : this.searchData.contractType == 1 ? 'find_rent_contract' : 'find_new_contract ', type: '6' }).then(res => {
                if (res !== undefined) {
                    this.orgTreeList = res
                }
            }).catch()
        },

        //搜索数据
        search() {
            console.log(this.searchData)
            contractFindPage(this.searchData).then(res => {
                if (res !== undefined) {
                    this.resultList = res.dataList
                    this.total = res.total
                    console.log(res)
                }
            }).catch()
        },

        //切换类型
        setContractType(type) {
            switch (type) {
                case 0: this.searchData = { pageNo: 1, pageSize: 15, contractType: 0 }; break;
                case 1: this.searchData = { pageNo: 1, pageSize: 15, contractType: 1 }; break;
                case 2: this.searchData = { pageNo: 1, pageSize: 15, contractType: 2 }; break;
            }
            this.isReset = !this.isReset
            this.getThree()
        },

        //页面跳转
        goToDetail(item) {
            switch (this.searchData.contractType) {
                case 0: this.$router.push({ path: '/contractDetail', query: { id: item.id, index: 0 } }); break;
                case 1: this.$router.push({ path: '/contractDetail', query: { id: item.id, index: 1 } }); break;
                case 2: this.$router.push({ path: '/contractDetail', query: { id: item.id, index: 2 } }); break;
            }
        },


        //拼接单个子组件返回来的条件值
        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
            console.log(JSON.stringify(this.searchData))
        },
        setUser(obj) {
            let userId = { signUserId_EQ: obj.sysUserId }
            this.searchData = { ...this.searchData, ...userId }
        },
        //子组件选择了不限，进行删除指定字段
        clearData(obj) {
            const objKeys = Object.keys(obj)
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key]
                }
                return acc
            }, {})
            console.log(JSON.stringify(this.searchData))
        },

        //重置
        reset() {
            this.searchData = {
                pageNo: 1,
                pageSize: 10,
                contractType: this.searchData.contractType
            }
            this.isReset = !this.isReset
            this.time = ''
        },
        handleSizeChange(val) {
            this.searchData.pageSize = val
            this.search()
        },
        handleCurrentChange(val) {
            this.searchData.pageNo = val
            this.search()
        },

    },
    watch: {
        searchData: {
            handler() {
                this.search()
            },
        },

        inputSearch() {
            let obj = { searchKey: this.inputSearch }
            this.setData(obj)
        },
        time() {
            if (this.time == null) {
                this.clearData({ signTime_BEGIN: '', signTime_END: '' })
            } else {
                let obj = { signTime_BEGIN: this.time[0], signTime_END: this.time[1] }
                this.searchData = { ...this.searchData, ...obj }
            }
        },
    },
    computed: {
    },
}
</script>
    
<style scoped>
.nulData {
    background-image: url("../../assets/images/nullData.svg");
    background-size: cover;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #979797;
}

.tag1 {
    border: 1px solid #f68686;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    background: #f6868629;
    color: #f68686;
    font-size: 12px;
}

.tag2 {
    border: 1px solid #f7ad53;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    background: #f7ad5329;
    color: #f7ad53;
    font-size: 12px;
}

.tag3 {
    border: 1px solid #54d2d0;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    background: #54d2d029;
    color: #54d2d0;
    font-size: 12px;
}

.tag4 {
    border: 1px solid #518aff;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    background: #518aff29;
    color: #518aff;
    font-size: 12px;
}

.tag5 {
    border: 1px solid #d0a0ff;
    padding: 0 10px;
    margin-right: 10px;
    border-radius: 4px;
    background: #d0a0ff29;
    color: #d0a0ff;
    font-size: 12px;
}

.resetDiv {
    background: #6698ff;
    margin-top: 20px;
    padding: 5px 0;
    font-size: 13px;
    color: white;
    border-radius: 7px;
}

.leftTopInput {
    display: flex;
    width: 100%;
    position: relative;
    padding-top: 10px;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 2px;
}

.lefMain {
    min-width: 310px;
    padding: 15px;
    overflow: auto;
    background: white;
    margin-bottom: 30px;
    margin-right: 5px;
    box-shadow: 1px 10px 30px 4px #e9e9e9;
}

.rightContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: white;
    margin: 10px 30px 30px 25px;
    position: relative;
    box-shadow: 1px 5px 10px 4px #e9e9e9;
}

.leftTop {
    color: #6698ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.addImg {
    width: 15px;
    height: 15px;
    padding-right: 3px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
}

.rightMain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
}

.rightList {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    overflow: auto;
    padding: 10px 0;
}

.rightTop {
    display: flex;
    padding-top: 15px;
    align-items: center;
    justify-content: space-between;
    padding-right: 32px;
}

.setPage {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding: 10px;
}

.out {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.outImg {
    width: 20px;
    height: 20px;
    padding-right: 5px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.time {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
}

.img1 {
    position: absolute;
    left: 7px;
    width: 15px;
    height: 15px;
    top: 17px;
    z-index: 1;
}

.leftTop2Input {
    outline: none;
    width: inherit;
    height: 25px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 23px;
    padding-right: 20px;
    background-color: rgb(242, 242, 242);
    border-radius: 5px;
    font-size: 12px;
    position: relative;
}

.leftTop2Input:focus {
    border: 1px solid #6698ff;
}

.eDataList {
    display: flex;
    align-items: flex-start;
    padding: 5px 30px;
    margin: 3px 0px;
    position: relative;
}

.eDataList::after {
    position: absolute;
    content: "";
    width: calc(100% - 60px);
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid #eee;
    padding: 1px;
    margin-right: 30px;
}

.eDataList:hover {
    background: #eee;
}

.dataTitle {
    font-size: 13px;
    color: #6698ff;
    padding-bottom: 10px;
}

.dataValue {
    font-size: 13px;
    color: #5c5c5c;
    display: flex;
    flex-wrap: wrap;
}

.dataValue>span {
    margin-right: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.dataDom {
    flex: 1;
    text-align: left;
    padding-bottom: 5px;
}
</style>